<template>
  <div class="group-page">
    <PageHeader></PageHeader>
    <div class="page-main">
      <div class="page-body">
        <div class="container">
          <div class="col-lg-8 group-body-left">
            <GroupCard title="热门小组" :isHasMore="true" class="hot-group" link="/group/search_group">
              <div class="col-lg-2 col-md-2 col-sm-4 group-list-item d-flex" v-for="item in listData.data"
                :key="item._id">
                <p class="group-item-img">
                  <a href="" title="" class="font-gray-1">
                    <img :src="item.image" alt="">
                  </a>
                </p>
                <p class="group-item-title fs-sm">{{item.title}}</p>
              </div>
            </GroupCard>
            <GroupCard title="热门话题">
              <div class="topic-list-item d-flex" v-for="item in topicData.data" :key="item._id">
                <div class="topic-item-left">
                  <a href="">
                    <img class="topic-item-img" src="../../assets/default.jpg" alt="" lazyload="true"
                      :data-original="item.image">
                  </a>
                </div>
                <div class="topic-item-right">
                  <div class="item-right-oneline">
                    <a class="item-right-title">{{item.title}}</a>
                    <span class="item-right-num fs-xs font-white"
                      :class="item.reply === null? 'd-none':''">{{item.reply}}</span>
                  </div>
                  <div class="item-right-twoline fs-xs font-light">
                    <a href="" class="item-right-cate font-primary">{{item.category}}</a>
                    <span class="my-border">•</span>
                    <a href="" class="item-right-name font-gary">{{item.username}}</a>
                    <span class="my-border">•</span>
                    <span class="my-border">{{item.time}}</span>
                    <span class="my-border">最后回复</span>
                    <a href="" class="item-right-name font-gary">{{item.lastReply.name}}</a>
                    <span class="my-border">{{item.lastReply.time}}</span>
                  </div>
                </div>
              </div>
            </GroupCard>
          </div>
          <div class="col-lg-4 group-body-right">
            <div class="group-card-user" v-if="token">
              <div class="group-user">
                <a href="">
                  <img :src="user.data.avatar" alt="">
                </a>
              </div>
              <p>
                <a class="font-black" href="#">{{user.data.username}}</a>
              </p>
            </div>
            <div class="input-group-search w-100">
              <input type="text" placeholder="小组搜索" class="input-search">
              <span class="icon-container"><i class="iconfont icon-search"></i></span>
            </div>
            <GroupCard title="我的小组" :isHasMore="true" v-if="token">
              <div class="col-xl-3 col-lg-4 col-md-2 col-sm-4 group-list-item d-flex" v-for="index in 3" :key="index">
                <p class="group-item-img">
                  <a href="" title="" class="font-gray-1">
                    <img src="http://image.howzhi.com/group-icon/2013/02-03/111938a63532860008.jpg" alt="">
                  </a>
                </p>
                <p class="group-item-title fs-sm">摄影公社</p>
              </div>
            </GroupCard>
            <GroupCard title="新晋小组">
              <div class="new-group-list">
                <div class="new-group-item" v-for="item in newGroupData.data" :key="item._id">
                  <div class="new-item-left">
                    <a href="">
                      <img src="../../assets/default.jpg" alt="" lazyload="true" :data-original="item.image">
                    </a>
                  </div>
                  <div class="new-item-right">
                    <div class="item-right-title">
                      <a>{{item.title}}</a>
                    </div>
                    <div class="item-right-info fs-sm">
                      <i class="iconfont fs-sm icon-user-friends"></i>
                      <span>{{item.number}}</span>
                      <i class="iconfont fs-sm icon-chat1"></i>
                      <span>{{item.topic}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </GroupCard>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import PageHeader from '../PageHeader'
import PageFooter from '../PageFooter'
import GroupCard from '../GroupCard'
import { getHotGroupList, getHotTopicList, getNewGroupList, getCurrentUser } from '../../api'
import { reactive, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    PageHeader, PageFooter, GroupCard
  },
  setup () {
    const listData = reactive({
      data: []
    })
    const topicData = reactive({
      data: []
    })
    const newGroupData = reactive({
      data: []
    })
    const user = reactive({
      data: []
    })

    // vuex
    const store = useStore()
    const token = computed(() => store.state.token)

    onMounted(async () => {
      const hotGroupRes = await getHotGroupList()
      listData.data = hotGroupRes.data
      console.log(listData.data)
      const gotTopicRes = await getHotTopicList()
      topicData.data = gotTopicRes.data
      const newGroupRes = await getNewGroupList()
      newGroupData.data = newGroupRes.data
      const res = await getCurrentUser()
      console.log(res.data)
      user.data = res.data
      setTimeout(() => { lazyload() })
    })
    function lazyload () {
      const scrollY = document.documentElement.scrollTop
      const offsetHeight = document.documentElement.offsetHeight
      const imgs = document.querySelectorAll('img[data-original][lazyload]')
      imgs.forEach(item => {
        if (item.dataset.original === '') {
          return
        }
        const rect = item.getBoundingClientRect()
        if (rect.bottom >= 0 && rect.top < scrollY + offsetHeight) {
          const img = new Image()
          img.src = item.dataset.original
          // console.log(img.src)
          img.onload = function() {
            item.src = img.src
          }
          item.removeAttribute('data-original')
          item.removeAttribute('lazyload')
        }
      })
    }
    document.addEventListener('scroll', lazyload)
    return { listData, topicData, newGroupData, token, user }
  }

}
</script>

<style lang="scss" scoped>
.group-page {
  .page-main {
    background-color: #f4f6f8;
    padding-bottom: 20px;
  }
  .page-body {
    padding-top: 30px;
    .container {
      margin: 0 -10px;
      display: flex;
    }
    .group-list-item {
      padding: 0 10px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .group-item-img {
        a {
          outline: none !important;
        }
        img {
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }
        margin-bottom: 10px;
      }
      .group-item-title {
        text-align: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .topic-list-item {
      width: 100%;
      margin-top: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f5f5f5;
      &:last-child {
        border-bottom: none;
      }
      .topic-item-left {
        margin-right: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .topic-item-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .item-right-oneline {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          .item-right-title {
            margin: 0;
          }
          .item-right-num {
            &.d-none {
              display: none;
            }
            padding: 3px 7px;
            border-radius: 10px;
            background-color: #e1e1e1;
            height: 18px;
            line-height: 12px;
            vertical-align: baseline;
            text-align: center;
            font-weight: bold;
            white-space: nowrap;
          }
        }
        .item-right-twoline {
          .my-border {
            padding: 0 5px;
          }
        }
      }
    }
    .group-card-user {
      background-color: #fff;
      padding: 15px;
      display: flex;
      margin-bottom: 20px;
      .group-user {
        margin-right: 15px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
    }
    .input-group-search {
      display: flex;
      margin-bottom: 20px;
      input {
        width: 85%;
        outline: none;
        padding: 6px 12px;
        height: 34px;
        font-size: 14px;
        border: 1px solid #f0f0f0 !important;
      }
      .icon-container {
        display: block;
        border: 1px solid #15c288;
        width: 15%;
        height: 34px;
        text-align: center;
        line-height: 34px;
        .iconfont {
          color: #15c288;
        }
      }
    }
    .new-group-list {
      margin-top: -20px;
      .new-group-item {
        display: flex;
        margin-top: 20px;
        .new-item-left {
          margin-right: 10px;
          img {
            width: 60px;
            height: 60px;
          }
        }
        .new-item-right {
          .item-right-title {
            margin: 5px 0;
          }
          .item-right-info {
            color: #c1c1c1;
            .iconfont {
              padding-right: 5px;
            }
            span {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
